<!--
 * @Author: OBKoro1
 * @Date: 2022-03-07 10:29:45
 * @LastEditors: yangyongtao
 * @LastEditTime: 2024-03-15 10:41:49
 * @FilePath: \onemodeSWJ\src\views\Map.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by 用户/公司名, All Rights Reserved. 
-->
<template>
  <div class="back-box">
    <Transition name="left-box-animation">
      <!-- 预报侧边栏 -->
      <div class="left-box" v-show="asideManage.forecastManage.show">
        <Transition name="left-box-animation">
          <div class="left-item-box" v-show="asideManage.forecastManage.manageArr['寸滩站'].show">
            <img class="left-item-title-img" src="@/assets/title.png" />
            <div class="left-item-title">寸滩站</div>
            <div class="left-item-time">{{ chartsTimeShow.siteTimeShow }}</div>
            <div class="left-item-content">
              <div id="towEcharts" style="width: 100%; height: 100%"></div>
            </div>
          </div>
        </Transition>

        <Transition name="left-box-animation">
          <div class="left-item-box" v-show="asideManage.forecastManage.manageArr['三峡未来预测沙量'].show
            ">
            <img class="left-item-title-img" src="@/assets/title.png" />
            <div class="left-item-title">三峡未来预测沙量</div>
            <div class="left-item-time">
              {{ chartsTimeShow.forecastTimeShow }}
            </div>
            <div class="left-item-content">
              <div id="oneEcharts" style="width: 100%; height: 100%"></div>
            </div>
          </div>
        </Transition>

        <Transition name="left-box-animation">
          <div class="left-item-box" v-show="asideManage.forecastManage.manageArr['坝下游冲淤量预测'].show
            ">
            <img class="left-item-title-img" src="@/assets/title.png" />
            <div class="left-item-title">坝下游冲淤量预测</div>
            <div class="left-item-content">
              <div id="threeEcharts" style="width: 100%; height: 100%"></div>
            </div>
          </div>
        </Transition>

        <Transition name="left-box-animation">
          <div class="left-item-box" style="height: 230px" v-show="asideManage.forecastManage.manageArr['多库对比'].show">
            <img class="left-item-title-img" src="@/assets/title.png" />
            <div class="left-item-title">多库对比</div>
            <div class="left-item-content left-item-contentContrast"
              style="overflow: hidden; height: 83%; border-radius: 10px">
              <el-table :data="sedimentLoadTable" size="small" style="width: 100%">
                <el-table-column label="库区" prop="name" width="80" />
                <el-table-column label="入库输沙量(万吨)" prop="inpSed" />
                <el-table-column label="出库输沙量(万吨)" prop="outSed" />
              </el-table>
            </div>
          </div>
        </Transition>
      </div>
    </Transition>

    <Transition name="left-box-animation">
      <!-- 成果侧边栏 -->
      <div class="left-box" v-show="asideManage.resultManage.show && asideManage.planType === 'sx'">
        <!-- <Transition name="left-box-animation">
          <div class="left-item-box" v-show="asideManage.resultManage.manageArr['含沙量过程'].show">
            <img class="left-item-title-img" src="@/assets/title.png" />
            <div class="left-item-title">含沙量过程</div>
            <div class="left-item-content"></div>
          </div>
        </Transition> -->

        <Transition name="left-box-animation">
          <div class="left-item-box left-item-longbox" :class="[
            resultParam.selectPlan.length === 1
              ? 'smallheight'
              : 'longheight',
          ]" v-show="asideManage.resultManage.manageArr['方案信息'].show">
            <img class="left-item-title-img" src="@/assets/title.png" />
            <div class="left-item-title">方案信息</div>
            <div class="left-item-content-info" v-if="resultParam.selectPlan.length === 1">
              <div class="item">
                <span class="title">方案名称:</span>
                <span class="value" :title="planItem[0]?.planName">{{
                  planItem[0]?.planName
                }}</span>
              </div>
              <div class="item">
                <span class="title">计算时间:</span>
                <span class="value">{{
                  moment(planItem[0]?.startTime).format("YYYY-MM-DD HH:mm:ss")
                }}</span>
              </div>
              <div class="item">
                <span class="title">计算用时:</span>
                <span class="value">{{ planItem[0]?.stateTime }}</span>
              </div>
              <div class="item">
                <span class="title">模拟时间段:</span>
                <div class="value">
                  <span>{{
                    moment(planItem[0]?.datastarttime).format("YYYY-MM-DD")
                  }}~</span>
                  <span>{{
                    moment(planItem[0]?.dataendtime).format("YYYY-MM-DD")
                  }}</span>
                </div>
              </div>
            </div>
            <div class="left-item-content-info left-item-content-coll" v-else>
              <!-- <el-tabs v-model="value">
                <el-tab-pane v-for="(item,i) in planNoArr" :key="item.planno" :label="item.planName" :name="i+''">
                  <div class="item">
                    <span class="title">方案名称:</span>
                    <span class="value" :title="item?.planName">{{ item?.planName }}</span>
                  </div>
                  <div class="item">
                    <span class="title">计算时间:</span>
                    <span class="value">{{ moment(item?.startTime).format("YYYY-MM-DD") }}</span>
                  </div>
                  <div class="item">
                    <span class="title">计算用时:</span>
                    <span class="value">{{ item?.stateTime }}</span>
                  </div>
                  <div class="item">
                    <span class="title">模拟时间段:</span>
                    <div class="value">
                      <span>{{ moment(item?.datastarttime).format("YYYY-MM-DD") }}~</span>
                      <span>{{ moment(item?.dataendtime).format("YYYY-MM-DD") }}</span>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs> -->
              <el-collapse value="0" @change="collapseChange" :accordion="true">
                <el-collapse-item v-for="(item, i) in planNoArr" :key="item.planno" :name="i + ''" :title="item.planName">
                  <div class="item">
                    <span class="title">计算时间:</span>
                    <span class="value">{{
                      moment(item?.starttime).format("YYYY-MM-DD HH:mm:ss")
                    }}</span>
                  </div>
                  <div class="item">
                    <span class="title">计算用时:</span>
                    <span class="value">{{ item?.stateTime }}</span>
                  </div>
                  <div class="item">
                    <span class="title">模拟时间段:</span>
                    <div class="value">
                      <span>{{
                        moment(item?.datastarttime).format("YYYY-MM-DD")
                      }}~</span>
                      <span>{{
                        moment(item?.dataendtime).format("YYYY-MM-DD")
                      }}</span>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </Transition>

        <Transition name="left-box-animation">
          <div class="left-item-box left-item-boxSedimentSum" v-show="asideManage.resultManage.manageArr['冲淤量'].show">
            <img class="left-item-title-img" src="@/assets/title.png" />
            <div class="left-item-title">冲淤量</div>
            <div class="left-item-content-info">
              <el-table :header-row-style="{ color: '#000' }" :row-style="rowBgColor" :data="sedimentSum.tableData"
                max-height="150" style="width: 120%">
                <!-- <el-table-column prop="name" label="方案名">
                </el-table-column> -->
                <el-table-column align="center" prop="rkl" label="进库沙量(万吨)">
                </el-table-column>
                <el-table-column align="center" prop="psl" label="出库沙量(万吨)">
                </el-table-column>
                <el-table-column align="center" prop="zcyl" label="总冲淤量(万m³)">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </Transition>

        <Transition name="left-box-animation">
          <div class="left-item-box left-item-boxSedimentSumEachrts"
            v-show="asideManage.resultManage.manageArr['冲淤量累积过程'].show">
            <img class="left-item-title-img" src="@/assets/title.png" />
            <div class="left-item-title">冲淤量累积过程</div>
            <div class="left-item-content-info">
              <div id="sedimentSumEcharts" style="height: 170px; width: 300px"></div>
            </div>
          </div>
        </Transition>
      </div>
    </Transition>

    <Transition name="left-box-animation">
      <!-- 成果侧边栏 -->
      <div class="left-box" v-show="asideManage.resultManage.show && asideManage.planType === 'cj'">
        <Transition name="left-box-animation">
          <div class="left-item-box left-item-longbox" :class="[
            resultParam.selectPlan.length === 1
              ? 'smallheight'
              : 'longheight',
          ]">
            <img class="left-item-title-img" src="@/assets/title.png" />
            <div class="left-item-title">方案信息</div>

            <div class="left-item-content-info">
              <div class="item">
                <span class="title">方案名称:</span>
                <span class="value" :title="resultParam.selectPlanData.planName">
                  {{ resultParam.selectPlanData.planName }}
                </span>
              </div>
              <div class="item">
                <span class="title">计算时间:</span>
                <span class="value">
                  {{
                    moment(resultParam.selectPlanData.startTime).format(
                      "YYYY-MM-DD HH:mm:ss"
                    )
                  }}
                </span>
              </div>
              <div class="item">
                <span class="title">计算用时:</span>
                <span class="value">{{
                  resultParam.selectPlanData.stateTime
                }}</span>
              </div>
            </div>
          </div>
        </Transition>
        <Transition name="left-box-animation">
          <div class="left-item-box left-item-longbox" :class="[
                resultParam.selectPlan.length === 1
                  ? 'smallheight'
                  : 'longheight',
              ]">
            <img class="left-item-title-img" src="@/assets/title.png" />
            <div class="left-item-title">分段冲淤量</div>

            <div class="left-item-content-info">
              <div id="sublevel_cy_chart" style="height: 100%"></div>
            </div>
          </div>
        </Transition>
        <Transition name="left-box-animation">
          <div class="left-item-box left-item-longbox" :class="[
            resultParam.selectPlan.length === 1
              ? 'smallheight'
              : 'longheight',
          ]">
            <img class="left-item-title-img" src="@/assets/title.png" />
            <div class="left-item-title">冲淤强度</div>

            <div class="left-item-content-info">
              <div id="cy_strength_chart" style="height: 100%"></div>
            </div>
          </div>
        </Transition>
      </div>
    </Transition>

    <!-- 顶部按钮 -->
    <Transition>
      <div class="result-box" :style="{
        left:
          !asideManage.forecastManage.show && !asideManage.resultManage.show
            ? '60px'
            : '380px',
      }">
        <div class="result-box-button-group">
          <el-popover width="200px" placement="right-start" trigger="click" popper-class="popper-box">
            <template #reference>
              <div class="result-box-button">
                <img :src="base1" style="vertical-align: middle" />
              </div>
            </template>

            <div class="popover-item" v-for="(value, key, i) in asideManage[
              asideManage.showType + 'Manage'
            ].manageArr" :key="i">
              {{ key }}

              <el-switch v-model="value.show" />
            </div>
          </el-popover>

          <div class="result-box-button" @click="asideShowTypeChange">
            <img :src="base2" :style="{
              transform:
                !asideManage.forecastManage.show &&
                  !asideManage.resultManage.show
                  ? 'rotate(180deg)'
                  : 'rotate(0deg)',
              verticalAlign: 'middle',
            }" />
          </div>
        </div>
        <el-form :inline="true">
          <el-form-item>
            <el-select style="width: 330px" v-model="resultParam.selectPlan" placeholder="请选择需要查看成果的方案" clearable multiple
              :disabled="resultParam.palnSelectDisabled" collapse-tags collapse-tags-tooltip>
              <el-option v-for="item in resultParam.planTable" :key="item.planno" :label="item.planName"
                :value="item.planno">
                <span style="float: left">{{ item.planName }}</span>
                <span style="
                    float: right;
                    color: #909399;
                    font-size: 13px;
                    padding-left: 10px;
                  ">
                  {{ item.address }}
                </span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" :disabled="resultParam.palnSelectDisabled" @click="resultSearch">
              查看成果
            </el-button>
            <el-button type="primary" @click="showPlanContrast">
              多方案对比
            </el-button>
            <el-button @click="clearResult"> 清除显示 </el-button>
          </el-form-item>
        </el-form>
      </div>
    </Transition>

    <div id="map121321312"></div>

    <div v-show="asideManage.planContrast.show" class="plan-result-contrast-big-box">
      <ResultPage />
    </div>

    <!-- 底部成果 -->
    <div v-if="resultParam.colorCard.length != 0" class="plan-result-big-box">
      <div class="plan-result-schedule-box">
        <div class="plan-result-schedule-content">
          <div v-if="asideManage.planType === 'sx'">
            <el-row class="selectDuan">
              <div>断面区间选择</div>
              <el-slider v-model="resultParam.sliderDuanIndex" range :max="resultParam.sliderDuanMax"
                :min="resultParam.sliderDuanMin" :marks="resultParam.sliderDuanData" :format-tooltip="sliderDuanFormat"
                @change="sliderDuanChange" />
            </el-row>
            <el-radio-group v-model="resultParam.selectPlanResultType" size="small" @change="resultSearch">
              <el-radio-button label="s" :disabled="resultParam.resultTypeDisabled">
                <slot> 含沙量 </slot>
              </el-radio-button>
              <el-radio-button label="cy" :disabled="resultParam.resultTypeDisabled">
                <slot> 冲淤量 </slot>
              </el-radio-button>
            </el-radio-group>
            <el-row>
              <!-- 成果图表 -->
              <el-col :span="resultParam.sandPushMainSiteTimeData.length &&
                resultParam.selectPlanResultType === 's'
                ? 19
                : 24
                ">
                <div id="plan-result-echarts" style="height: 200px; width: 100%"></div>
              </el-col>

              <!-- 沙峰抵达时间表格 -->
              <el-col :span="5" style="padding-right: 10px" v-if="resultParam.sandPushMainSiteTimeData.length &&
                resultParam.selectPlanResultType === 's'
                ">
                <el-table :data="resultParam.sandPushMainSiteTimeData" empty-text="当前方案暂无沙峰数据" border height="180px"
                  size="small" style="width: 100%">
                  <el-table-column label="沙峰推演" align="center">
                    <el-table-column prop="stnm" label="站点" width="60" align="center" />
                    <el-table-column prop="xsnm" label="断面" align="center" />
                    <el-table-column prop="sdf" label="推算抵达时间" align="center" />
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="2">
                <div class="plan-result-play">
                  <PauseCircleOutlined :style="{
                    color: resultParam.playType === 'pause' ? '#409eff' : '',
                  }" @click="resultPlayTypeChange('pause')" />
                  <PlayCircleOutlined :style="{
                    color: resultParam.playType === 'play' ? '#409eff' : '',
                  }" @click="resultPlayTypeChange('play')" />
                </div>
              </el-col>
              <el-col :span="22" style="display: flex">
                <el-slider v-if="resultParam.linkageStatus" range v-model="resultParam.silderRange"
                  :marks="resultParam.silderRangeDataObj" :format-tooltip="sliderFormat"
                  :max="resultParam.silderRangeLength" @change="sliderRangeChange" />
                <el-slider v-else v-model="resultParam.silderIndex" range :marks="resultParam.silderDataObj"
                  :format-tooltip="sliderFormat" :max="resultParam.silderLength" @change="sliderChange" />

                <el-button @click="rangeSelection" style="margin-left: 20px; margin-top: -10px" size="mini">
                  范围选取
                </el-button>
              </el-col>
            </el-row>
          </div>

          <div v-else-if="asideManage.planType === 'cj'">
            <longTimeForecast />
          </div>
        </div>
      </div>

      <div class="cy-color-card-box">
        <img class="cy-color-card-img" src="@/assets/title.png" />
        <div class="cy-color-card-title">色卡</div>
        <div class="cy-color-card-content">
          <div class="color-box" v-for="(item, index) in resultParam.colorCard" :key="index">
            <span class="color-block" :style="{
              backgroundColor: `rgb(${item.key})`,
            }"></span>
            <span class="color-text">{{ item.data }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="map-legend-box" v-if="entitiesCard">
      <img class="map-legend-img" src="@/assets/title.png" />
      <div class="map-legend-title">图例</div>
      <div class="map-legend-content">
        <div @click="siteShowTypeChange(['ZQ', 'ZZ'])">
          <img v-if="entitiesShowType.ZQ" :src="ss" />
          <img v-else :src="ssc" />
          实时站
        </div>
        <!-- <div @click="siteShowTypeChange('ZZ')">
          <img v-if="entitiesShowType.ZZ" src="@/assets/mapIcon/ssyc.png" />
          <img v-else src="@/assets/mapIcon/ssyc-c.png" />
          实时站(含预测)
        </div> -->
        <div @click="siteShowTypeChange(['RR'])">
          <img v-if="entitiesShowType.RR" src="@/assets/mapIcon/sk.png" />
          <img v-else src="@/assets/mapIcon/sk-c.png" />
          水库站
        </div>
      </div>
    </div>

    <img class="sync" :src="syncBase64" alt="" srcset="" @click="dataReload" />

    <cesiumBaseMapChange :baseMapChangeFunction="changeBaseMap" :baseMapManage="baseMapManage" />
  </div>

  <el-dialog v-model="siteProcessLineDialog" :title="siteProcessLineInfoData.name" width="65%" draggable destroy-on-close>
    <el-form :inline="true">
      <el-form-item label="起止时间">
        <el-date-picker v-model="siteProcessLineInfoData.timeRange" type="daterange" style="width: 210px"
          value-format="YYYY-MM-DD 00:00:00" :clearable="false" :editable="false" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="siteDialogEchartsInit">
          查询
        </el-button>
      </el-form-item>
    </el-form>

    <el-row style="height: 500px">
      <el-col :span="16">
        <div id="siteEcharts" style="width: 100%; height: 100%"></div>
      </el-col>
      <el-col :span="8">
        <el-table :data="siteProcessLineInfoData.tableData" rowKey="tm" border stripe max-height="500px" size="small"
          style="height: 100%">
          <el-table-column label="时间" width="100" align="center">
            <template #default="scope">
              {{ filterTime(scope.row.time) }}
            </template>
          </el-table-column>
          <el-table-column v-for="(item, i) in siteProcessLineInfoData.tableColumnData" :key="i" :prop="item.value"
            :label="item.name" align="center" />
        </el-table>
      </el-col>
    </el-row>
  </el-dialog>

  <el-dialog center v-model="sectionDialog.show" :title="sectionDialog.name" @close="sectionDialog.close"
    :width="waterSlider.sliderShow ? '60%' : '45%'">
    <div style="display: flex">
      <div class="sliderWater" v-if="waterSlider.sliderShow">
        <el-slider height="420" show-input :max="waterSlider.max" :min="waterSlider.min" :step="0.01"
          @change="handleChange" vertical v-model="waterSlider.watervalue">
        </el-slider>
      </div>
      <div class="echartsDuan">
        <div id="section-charts" style="height: 500px; width: 100%"></div>

        <el-table v-if="sectionDialog.sixDataArr.length != 0" :data="sectionDialog.sixDataArr" border style="width: 100%">
          <el-table-column label="断面测次" prop="msno" />
          <el-table-column label="平均水深" prop="depth" />
          <el-table-column label="水面宽" prop="width" />
          <el-table-column label="过水面积" prop="area" />
          <el-table-column label="河项系数" prop="hcxs" />
          <el-table-column label="最大水深" prop="maxDepth" />
          <el-table-column label="平均高程" prop="height" />
          <el-table-column label="说明" prop="nt" />
        </el-table>
      </div>
    </div>
  </el-dialog>

  <el-tooltip class="box-item" effect="dark" content="切换为表格展示" placement="top">
    <el-icon class="icon" @click="handleClick">
      <Switch />
    </el-icon>
  </el-tooltip>
</template>

<script lang="ts">
import {
  PauseCircleOutlined,
  PlayCircleOutlined,
  SyncOutlined,
} from "@ant-design/icons-vue";
import {
  defineComponent,
  ref,
  provide,
  watch,
  inject,
  reactive,
  toRefs,
  onMounted,
  computed,
} from "vue";
import moment from "moment";
import cesiumFunction from "@/utils/cesiumFunction";
import ResultPage from "@/components/resultPage.vue";

import longTimeForecast from "./longTimeForecast.vue";
import cesiumBaseMapChange from "./cesiumBaseMapChange.vue";

import { useStore } from "vuex";
import { useRouter } from "vue-router";

export default defineComponent({
  components: {
    PauseCircleOutlined,
    PlayCircleOutlined,
    SyncOutlined,
    ResultPage,
    longTimeForecast,
    cesiumBaseMapChange,
  },
  setup() {
    const state = reactive({
      base1:
        "",
      base2:
        "",

      ss: "",
      ssc: "",
      syncBase64:
        "",
    });
    const value = ref("0");
    const store = useStore();
    const router = useRouter();

    // 单方案选中的planno
    const planno = computed(() => {
      return store.state.planno;
    });

    // 单方案对象
    const planItem: any = computed(() => {
      return store.state.planList.filter((item: any) => {
        return item.planno === planno.value;
      });
    });

    // 选中的多方案数组
    const planNoArr: any = computed(() => {
      return store.state.planList.filter(
        (item: any) => store.state.plannoMore.indexOf(item.planno) != -1
      );
    });

    const handleClick = () => {
      router.push("sedimentScheme_manage");
    };

    window.addEventListener('blur', () => {
      console.log('blur');
    });

    window.addEventListener('focus', () => {
      console.log('focus');
    });

    return {
      planno,
      planItem,
      moment,
      planNoArr,
      value,
      handleClick,
      ...toRefs(state),

      ...cesiumFunction(),
    };
  },
});
</script>

<style scoped lang="less">
.back-box {
  width: 100%;
  height: 100%;
  position: relative;

  .left-box {
    color: #fff;
    z-index: 999;
    position: absolute;
    left: 20px;
    height: 100%;

    .left-item-box {
      position: relative;
      width: 300px;
      height: 200px;
      margin-top: 10px;
      background-color: #fff;
      border-radius: 10px;

      .left-item-title-img {
        position: absolute;
        width: 200px;
        height: 40px;
        left: -12px;
      }

      .left-item-title {
        position: relative;
        font-size: 12px;
        height: 40px;
        line-height: 36px;
        margin-left: 10px;
      }

      .left-item-time {
        margin-left: 14px;
        font-size: 12px;
        color: #43b5fe;
      }

      .left-item-content {
        height: 75%;
      }

      .left-item-contentContrast {
        padding: 0 10px;
      }

      ::v-deep(.el-tabs__item) {
        position: relative;
        display: inline-block;
        white-space: nowrap;
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;

        .el-icon-close {
          position: absolute;
          top: 13px;
          right: 3px;
        }
      }

      ::v-deep(.el-tabs__header) {
        .is-closable:hover {
          padding-left: 10px;
          padding-right: 20px;
        }
      }

      ::v-deep(.el-tabs__nav) {
        line-height: 10px;
      }

      ::v-deep(.el-collapse-item__wrap) {
        border-bottom: none;
      }

      .left-item-content-coll {
        padding: 10px 0 0 0 !important;
      }

      .left-item-content-info {
        padding: 10px;
        color: #000;
        height: 76%;
        font-size: 14px;

        ::v-deep(.el-collapse) {
          height: 95%;
          overflow-y: scroll;
          border-bottom: none;
          padding: 0 10px;
        }

        .el-divider--horizontal {
          margin: 0;
        }

        ::v-deep(.el-collapse)::-webkit-scrollbar {
          /*滚动条整体样式*/
          width: 5px;
          /*高宽分别对应横竖滚动条的尺寸*/
          height: 1px;
        }

        ::v-deep(.el-collapse)::-webkit-scrollbar-thumb {
          /*滚动条里面小方块*/
          border-radius: 10px;
          background: #409eff;
        }

        //滚动条底层颜色!
        ::v-deep(.el-collapse)::-webkit-scrollbar-track {
          border-radius: 10px;
          background: #fff;
          // background: #C1E7FF;

          // /*滚动条里面轨道*/
          // box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
        }

        .active {
          // background: ;
        }

        .item {
          margin-bottom: 10px;
          display: flex;
          align-items: center;

          .title {
            flex: 0 0 80px;
          }

          .value {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }

    .left-item-boxSedimentSum {
      height: 210px;
    }

    .left-item-boxSedimentSumEachrts {
      position: relative;
      width: 300px;
      height: 210px;
      margin-top: 10px;
      background-color: #fff;
      border-radius: 10px;

      .left-item-content-info {
        padding: 0 10px;
      }
    }

    .left-item-longbox {
      position: relative;
      width: 300px;
      margin-top: 10px;
      background-color: #fff;
      border-radius: 10px;
    }

    .longheight {
      height: 210px;
    }

    .smallheight {
      height: 210px;
    }
  }

  .result-box {
    transition: 0.5s;
    position: absolute;
    z-index: 999;
    top: 0px;
    width: 100%;
    background-color: hsla(0, 0%, 95.7%, 0.17);
    backdrop-filter: blur(20px);
    padding: 15px 16px 15px 32px;
    background-image: url("@/assets/res-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 10%;
    background-position: bottom;

    .result-box-button-group {
      position: absolute;
      left: -40px;
      top: 5px;

      .result-box-button {
        width: 30px;
        height: 30px;
        margin-bottom: 5px;
        cursor: pointer;
        background: #fff;
        border-radius: 7px;
        text-align: center;
        line-height: 30px;
      }
    }

    .el-form {
      display: inline-block;

      .el-form-item {
        margin-bottom: 0 !important;
      }
    }
  }

  #map121321312 {
  width: 100vw;
    height: 100vh;
  }

  .map-legend-box {
    width: 120px;
    position: absolute;
    right: 15px;
    bottom: 15px;
    border-radius: 10px;
    color: #000;
    background-color: #fff;

    .map-legend-img {
      position: absolute;
      width: 110px;
      height: 40px;
      left: -12px;
    }

    .map-legend-title {
      position: relative;
      font-size: 16px;
      color: #fff;
      height: 35px;
      line-height: 35px;
    }

    .map-legend-content {
      padding: 10px;

      div {
        cursor: pointer;
        margin-bottom: 5px;
      }

      img {
        width: 25px;
        height: 25px;
        vertical-align: middle;
      }
    }
  }

  .plan-result-contrast-big-box {
    position: absolute;
    bottom: -10px;
    left: 400px;
    width: 1274px;
    height: 400px;
    background: #fff;
    border-radius: 10px;
    padding-top: 10px;
  }

  .plan-result-big-box {
    .cy-color-card-box {
      width: 185px;
      position: absolute;
      right: 20px;
      bottom: 15px;
      border-radius: 10px;
      color: #000;
      background-color: #fff;

      .cy-color-card-img {
        position: absolute;
        width: 160px;
        height: 40px;
        left: -12px;
      }

      .cy-color-card-title {
        position: relative;
        font-size: 16px;
        color: #fff;
        height: 35px;
        line-height: 35px;
      }

      .cy-color-card-content {
        padding: 10px;

        .color-box {
          text-align: center;
          font-size: 12px;
          color: #000;
          margin-bottom: 1px;

          .color-block {
            width: 20%;
            height: 14px;
            display: inline-block;
            vertical-align: bottom;
          }

          .color-text {
            width: 60%;
            padding-left: 10px;
            text-align: center;
            display: inline-block;
            box-sizing: border-box;
          }
        }
      }
    }

    .plan-result-schedule-box {
      position: absolute;
      left: 55%;
      transform: translateX(-50%);
      bottom: -10px;
      width: 1100px;
      height: 350px;
      background: #ffffff;
      border-radius: 10px;

      .plan-result-schedule-img {
        position: absolute;
        width: 160px;
        height: 40px;
        left: -12px;
      }

      .plan-result-schedule-title {
        position: relative;
        font-size: 16px;
        color: #fff;
        height: 35px;
        line-height: 35px;
      }

      .plan-result-schedule-content {
        margin-top: 10px;

        .selectDuan {
          margin-bottom: 20px;
          display: flex;
          justify-content: center;
          align-items: center;

          .el-slider {
            margin-left: 20px;
          }
        }

        .el-slider {
          width: 85%;
          margin-left: 40px;
        }

        .plan-result-play {
          position: absolute;
          top: 10px;
          left: 25px;
          text-align: center;

          span {
            font-size: 30px;
            margin: 0 5px;
            cursor: pointer;
          }
        }
      }
    }
  }
}

.popper-box {
  .popover-item {
    margin: 4px 0;
    color: #0488ff;
    font-size: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 25px;
    font-size: 14px;
    background: #eef4ff;
    border-radius: 1px;
  }
}

.left-box-animation-enter-active,
.left-box-animation-leave-active {
  transition: 0.5s;
}

.left-box-animation-leave-to,
.left-box-animation-enter-from {
  transform: translateX(-320px);
}

.el-dialog__body {
  .sliderWater {
    flex: 0 0 80px;

    .el-slider {
      display: flex;
      flex-direction: column-reverse;

      ::v-deep(.el-slider__input) {
        margin-bottom: 10px;
      }
    }
  }
}

::v-deep(.el-collapse-item__content) {
  padding-bottom: 0;
}

::v-deep(.el-table .cell) {
  padding: 0;
  font-size: 12px;
}

.echartsDuan {
  flex: 1;
}

::v-deep(.el-table tbody tr) {
  pointer-events: none;
}

::v-deep(.el-table__body-wrapper) {
  .el-scrollbar__bar.is-vertical {
    width: 5px !important;
    display: block !important;

    .el-scrollbar__thumb {
      background-color: #409eff;
      opacity: 1;
    }
  }
}

.sync {
  position: fixed;
  right: 215px;
  bottom: 25px;
  width: 20px;
  height: 20px;
  color: #4290f7;
  cursor: pointer;
}

.icon {
  position: absolute;
  bottom: 40px;
  left: 350px;
  font-size: 26px;
  cursor: pointer;
  color: #4290f7;
}
</style>

距 坝 里 程 程 里 坝 距
